<template>
    <div class="ship-searchfor-wrap">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
            <el-form-item :label="$t('m.label.timeStatus')" prop="timeType">
                <el-select v-model="ruleForm.timeType" :placeholder="$t('m.placeholder.selectStatus')" size="small">
                    <el-option
                        v-for="item in timeType"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('m.label.creationTime')" prop="time" v-if="ruleForm.timeType" style="width: 400px;">
                <el-date-picker
                    v-model="ruleForm.time"
                    type="daterange"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                    @change="time"
                    value-format="yyyy-MM-dd"
                    format="yyyy 年 MM 月 dd 日"
                    size="small"
                ></el-date-picker>
            </el-form-item>
            <el-form-item :label="$t('m.label.Status')" prop="status">
                <el-select v-model="ruleForm.status" :placeholder="$t('m.placeholder.selectStatus')" size="small">
                    <el-option
                        v-for="item in findStatus"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('m.label.channel')" prop="channel">
                <el-select v-model="ruleForm.channel" :placeholder="$t('m.placeholder.selectChannel')" size="small">
                    <el-option
                        v-for="item in findChannel"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <br />
            <el-form-item label="OraderID" prop="fulfillmentOrderId">
                <el-input v-model="ruleForm.fulfillmentOrderId" size="small"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.label.clientSName')" prop="name">
                <el-input v-model="ruleForm.name" size="small"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.label.founder')" prop="creater">
                <el-input v-model="ruleForm.creater" size="small"></el-input>
            </el-form-item>
            <el-form-item label-width="10px">
                <el-button type="primary" @click="submitForm('ruleForm')" icon="el-icon-search" size="small">{{$t('m.button.search')}}</el-button>
                <el-button @click="resetForm('ruleForm')" icon="el-icon-circle-close" size="small">{{$t('m.button.reset')}}</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
const ERR_OK = 200;
export default {
    data() {
        return {
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 7
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 90
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    }
                ]
            },
            ruleForm: {
                status: "",
                channel: "",
                time: [],
                startDate: "",
                endDate: "",
                timeType: "",
                fulfillmentOrderId: "",
                name: "",
                creater: ""
            },
            findStatus: [
                {
                    id: "ready",
                    name: this.$t('m.button.toBeSubmitted')
                },
                {
                    id: "submited",
                    name: this.$t('m.button.submitted')
                },
                {
                    id: "invalid",
                    name: this.$t('m.button.Cancelled')
                }
            ],
            findChannel: [
                {
                    id: "amazon",
                    name: this.$t('m.router.shippingRefund.ship.amazon')
                },
                {
                    id: "edayun",
                    name: this.$t('m.router.shippingRefund.ship.edayun')
                },
                {
                    id: "winit",
                    name: this.$t('m.router.shippingRefund.ship.winit')
                }
            ],
            timeType: [
                {
                    id: "createTime",
                    name: this.$t('m.label.creationTime')
                },
                {
                    id: "submitTime",
                    name:this.$t('m.label.submissionTime')
                }
            ],
            rules: {
                time: [
                    {
                        required: true,
                        message :this.$t('m.placeholder.selectDate'),
                        trigger: "change"
                    }
                ]
            }
        };
    },
    methods: {
        time(data) {
            if (data) {
                this.ruleForm.startDate = data[0];
                this.ruleForm.endDate = data[1];
            }
        },
        // 提交查询
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.$emit("submitForm", this.ruleForm);
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    components: {
        
    }
};
</script>
<style lang="stylus" scoped>
.ship-searchfor-wrap {
    position: relative;
    .el-form{
        margin-bottom 10px
        }
    .el-form-item {
        display: inline-block;
        width: 280px;
        margin-bottom 0;
    }
}
</style>
